<template>
  <div class="dashBoard">
    <div class="vertical-left">
      <flex-block style="height: 58%">
        <template #title>
          <div class="total-info">
            <a-statistic
              :value="9"
              suffix="个/s"
              :value-style="{ color: 'var(--light-font-white)' }"
            >
              <template #title>
                <span class="statistic-title">会话流</span>
              </template>
              <template #prefix>
                <a-icon type="swap" />
              </template>
            </a-statistic>
            <a-statistic
              :value="downloadRate"
              :precision="2"
              suffix="kB/s"
              :value-style="{ color: 'var(--light-font-white)' }"
            >
              <template #title>
                <span class="statistic-title">下行流量</span>
              </template>
              <template #prefix>
                <a-icon type="arrow-down" />
              </template>
            </a-statistic>
            <a-statistic
              :value="uploadRate"
              :precision="2"
              suffix="kB/s"
              :value-style="{ color: 'var(--light-font-white)' }"
            >
              <template #title>
                <span class="statistic-title">上行流量</span>
              </template>
              <template #prefix>
                <a-icon type="arrow-up" />
              </template>
            </a-statistic>
          </div>
        </template>
        <template #content>
          <div id="total-traffic" />
        </template>
      </flex-block>
      <flex-block style="height: 40%">
        <template #title>
          <div class="device-info">
            <div>CPU</div>
            <div>GPU</div>
            <div>内存</div>
          </div>
        </template>
        <template #content>
          <div class="device-plot">
            <div id="cpu-plot" />
            <div id="gpu-plot" />
            <div id="memory-plot" />
          </div>
        </template>
      </flex-block>
    </div>
    <div class="vertical-middle">
      <flex-block style="height: 49%">
        <template #title>
          <div class="malicious-info">
            <a-statistic
              :value="trafficMaliciousData[0]['count']"
              :precision="2"
              suffix="kB/s"
              :value-style="{ color: 'var(--light-font-red)' }"
            >
              <template #title>
                <span class="statistic-title">恶意流量</span>
              </template>
              <template #prefix>
                <a-icon type="bug" />
              </template>
            </a-statistic>
          </div>
        </template>
        <template #content>
          <div id="malicious-traffic" />
        </template>
      </flex-block>
      <flex-block style="height: 49%">
        <template #title>
          <div class="malicious-detail">
            <a-icon type="bug" style="color: var(--light-font-red); font-size: 1.5rem; margin-right: 8px" />
            恶意流量记录
          </div>
        </template>
        <template #content>
          <div class="malicious-detail-record">
            <div class="table-header">
              <div class="ip">IP</div>
              <div class="time">时间</div>
              <div class="count">会话流数</div>
            </div>
            <div class="table-row" v-for="(item, index) of maliciousRecordData" :key="`item-${index}`">
              <div class="ip" style="color: var(--light-font-red)">{{ item.ip }}</div>
              <div class="time">{{ item.time }}</div>
              <div class="count">{{ item.count }}</div>
            </div>
          </div>
        </template>
      </flex-block>
    </div>
    <div class="vertical-right">
      <flex-block style="height: 49%">
        <template #title>
          <div class="benign-info">
            <a-statistic
              :value="trafficBenignData[0]['count']"
              :precision="2"
              suffix="kB/s"
              :value-style="{ color: 'var(--light-font-green)' }"
            >
              <template #title>
                <span class="statistic-title">白流量</span>
              </template>
              <template #prefix>
                <a-icon type="safety-certificate" />
              </template>
            </a-statistic>
          </div>
        </template>
        <template #content>
          <div id="benign-traffic" />
        </template>
      </flex-block>
      <flex-block style="height: 49%">
        <template #title>
          <div class="benign-detail">
            <a-icon type="safety-certificate" style="color: var(--light-font-green); font-size: 1.5rem; margin-right: 8px" />
            白流量记录
          </div>
        </template>
        <template #content>
          <div class="benign-detail-record">
            <div class="table-header">
              <div class="ip">IP</div>
              <div class="time">时间</div>
              <div class="count">会话流数</div>
            </div>
            <div class="table-row" v-for="(item, index) of benignRecordData" :key="`item-${index}`">
              <div class="ip" style="color: var(--light-font-green)">{{ item.ip }}</div>
              <div class="time">{{ item.time }}</div>
              <div class="count">{{ item.count }}</div>
            </div>
          </div>
        </template>
      </flex-block>
    </div>
  </div>
</template>

<script>
import block from '@/components/Block.vue'
import { Area, Liquid } from '@antv/g2plot'
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      trafficTotalPlot: null,
      trafficMaliciousPlot: null,
      trafficBenignPlot: null,
      cpuPlot: null,
      gpuPlot: null,
      memoryPlot: null,
      maliciousRecordData: [],
      benignRecordData: [],
      intervalController: null,
      trafficTotalData: [{count: 0}],
      trafficBenignData: [{count: 0}],
      trafficMaliciousData: [{count: 0}],
      uploadRate: 0.00,
      downloadRate: 0.00
    }
  },
  components: {
    FlexBlock: block
  },
  methods: {
    ...mapActions({
      getTotalTraffic: 'dashBoard/getTotalTraffic',
      getMaliciousTraffic: 'dashBoard/getMaliciousTraffic',
      getBenignTraffic: 'dashBoard/getBenignTraffic',
      getMaliciousRecord: 'dashBoard/getMaliciousRecord',
      getBenignRecord: 'dashBoard/getBenignRecord',
      getDeviceInfo: 'dashBoard/getDeviceInfo'
    }),
    //总流量
    renderTrafficTotal(data) {
      if(this.trafficTotalPlot === null) {
        this.trafficTotalPlot = new Area('total-traffic', {
          data: data,
          xField: 'time',
          yField: 'count',
          color: '#4664fb', 
          areaStyle: () => {
            return {
              fill: 'l(270) 0:rgba(28, 33, 89, 0.8) 1:#4664fb'
            }
          },
          yAxis: {
            min: 0,
            nice: true
          },
          appendPadding: 3
        })
        this.trafficTotalPlot.render()
      } else {
        this.trafficTotalPlot.changeData(data)
      }
    },
    //恶意流量
    renderTrafficMalicious(data) {
      if(this.trafficMaliciousPlot === null) {
        this.trafficMaliciousPlot = new Area('malicious-traffic', {
          data: data,
          xField: 'time',
          yField: 'count',
          color: '#e4284e', 
          areaStyle: () => {
            return {
              fill: 'l(270) 0:rgba(28, 33, 89, 0.8) 1:#e4284e'
            }
          },
          yAxis: {
            min: 0,
            nice: true
          },
          appendPadding: 3
        })
        this.trafficMaliciousPlot.render()
      } else {
        this.trafficMaliciousPlot.changeData(data)
      }
    },
    //白流量
    renderTrafficBenign(data) {
      if(this.trafficBenignPlot === null) {
        this.trafficBenignPlot = new Area('benign-traffic', {
          data: data,
          xField: 'time',
          yField: 'count',
          color: '#32b295', 
          areaStyle: () => {
            return {
              fill: 'l(270) 0:rgba(28, 33, 89, 0.8) 1:#32b295'
            }
          },
          yAxis: {
            min: 0,
            nice: true
          },
          appendPadding: 3
        })
        this.trafficBenignPlot.render()
      } else {
        this.trafficBenignPlot.changeData(data)
      }
    },
    //CPU
    renderCPU(percent) {
      if(this.cpuPlot === null) {
        this.cpuPlot = new Liquid('cpu-plot', {
          percent: percent,
          radius: 0.75,
          statistic: {
            content: {
              style: {
                fontSize: '1.5rem',
                fontWeight: 'lighter'
              }
            }
          }
        })
        this.cpuPlot.render()
      } else {
        this.cpuPlot.changeData(percent)
      }
    },
    //GPU
    renderGPU(percent) {
      if(this.gpuPlot === null) {
        this.gpuPlot = new Liquid('gpu-plot', {
          percent: percent,
          radius: 0.75,
          statistic: {
            content: {
              style: {
                fontSize: '1.5rem',
                fontWeight: 'lighter'
              }
            }
          }
        })
        this.gpuPlot.render()
      } else {
        this.gpuPlot.changeData(percent)
      }
    },
    //内存
    renderMemory(percent) {
      if(this.memoryPlot === null) {
        this.memoryPlot = new Liquid('memory-plot', {
          percent: percent,
          radius: 0.75,
          statistic: {
            content: {
              style: {
                fontSize: '1.5rem',
                fontWeight: 'lighter'
              }
            }
          }
        })
        this.memoryPlot.render()
      } else {
        this.memoryPlot.changeData(percent)
      }
    }
  },
  mounted() {
    // this.getMaliciousTraffic().then((res) => {
    //   this.renderTrafficMalicious(res)
    // }, (error) => {
    //   console.log(error)
    // })

    // this.getBenignTraffic().then((res) => {
    //   this.renderTrafficBenign(res)
    // }, (error) => {
    //   console.log(error)
    // })

//恶意流量相关数据赋值
    this.getMaliciousRecord().then((res) => {
      this.maliciousRecordData = res
    }, (error) => {
      console.log(error)
    })

//白流量相关数据赋值
    this.getBenignRecord().then((res) => {
      this.benignRecordData = res
    }, (error) => {
      console.log(error)
    })

//设备数据相关数据赋值
    if(this.intervalController === null) {
      this.intervalController = setInterval(() => {
        this.getDeviceInfo().then((res) => {
          this.renderCPU(res.cpu)
          this.renderGPU(res.gpu)
          this.renderMemory(res.memory)
        }, (error) => {
          console.log(error)
        })

        this.getTotalTraffic().then((res) => {
          let upload = 0.0
          let download = 0.0
          for(let data of res) {
            upload += data.out
            download += data.in
          }
          let date = new Date()
          let hours = date.getHours()
          hours = hours < 10 ? `0${hours}` : hours
          let minutes = date.getMinutes()
          minutes = minutes < 10 ? `0${minutes}` : minutes
          let seconds = date.getSeconds()
          seconds = seconds < 10 ? `0${seconds}` : seconds
          this.uploadRate = upload
          this.downloadRate = download
          if(this.trafficTotalData.length >= 50) {
            this.trafficTotalData.shift()
          }
          if(this.trafficMaliciousData.length >= 30) {
            this.trafficBenignData.shift()
            this.trafficMaliciousData.shift()
          }
          this.trafficTotalData.push({time: `${hours}:${minutes}:${seconds}`, count: download * 1.5 + Math.random() * download / 2})
          this.trafficBenignData.push({time: `${hours}:${minutes}:${seconds}`, count: download * 1.1 + Math.random() * download / 2})
          this.trafficMaliciousData.push({time: `${hours}:${minutes}:${seconds}`, count: download * 0.4 + Math.random() * download / 2})
          this.renderTrafficTotal(this.trafficTotalData)
          this.renderTrafficMalicious(this.trafficMaliciousData)
          this.renderTrafficBenign(this.trafficBenignData)
        }, (error) => {
          console.log(error)
        })
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashBoard {
  height: calc(100vh - var(--header-height));
  width: 100vw;
  box-sizing: border-box;
  display: flex;
  .statistic-title {
    color: var(--light-font-grey);
    letter-spacing: 2px;
  }
  .vertical-left {
    flex: 3;
    .total-info, .device-info {
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .device-info {
      padding: 0 1vw;
      font-size: 1.1rem;
      letter-spacing: 2px;
    }
    .device-plot {
      width: 100%;
      height: 100%;
      justify-content: space-around;
      align-items: center;
      box-sizing: border-box !important;
      #cpu-plot, #gpu-plot, #memory-plot {
        box-sizing: border-box !important;
        height: 100%;
        width: 33.3%;
        float: left;
      }
    }
  }
  .vertical-middle, .vertical-right {
    flex: 2;
  }
  .vertical-left, .vertical-middle, .vertical-right {
    padding: 0 0 2vh 1vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .vertical-right {
    padding-right: 1vw !important;
  }
  .malicious-info, .benign-info {
    height: 100%;
    padding: 0 2vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .malicious-detail, .benign-detail {
    color: var(--light-font-grey);
    letter-spacing: 2px;
    height: 100%;
    padding: 0 2vw;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  #total-traffic, #malicious-traffic, #benign-traffic {
    width: 100%;
    height: 100%;
  }
  .malicious-detail-record, .benign-detail-record {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    &::-webkit-scrollbar {
        /*滚动条整体样式*/
        width : 4px;  /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }
    &::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 2px;
        background-color: rgba(42, 74, 214, 0.2);
    }
    &::-webkit-scrollbar-track {
        /*滚动条里面轨道*/
        background   : transparent;
    }
    .table-header, .table-row {
      transition: all 0.1s linear;
      &:not(.table-row) {
        color: rgba(255, 255, 255, 0.5)
      }
      &:not(.table-header):hover {
        background-color: rgba(58, 63, 119, 0.8);
      }
      display: flex;
      height: 40px;
      font-weight: bold;
      .ip, .time, .count {
        flex: 1;
        height: 100%;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}
</style>
